<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>38 - axios 别名</title>
</head>
<body>
    <input type="button" value="get请求" class="get">
    <input type="button" value="post请求" class="post">

    <script src="./lib/axios.js"></script>
    <script>

        //设置根路径
        axios.defaults.baseURL = 'http://www.liulongbin.top:3006';





        // axios 别名写法本质上就是 axios 的简写





        // 1. axios   get 请求别名写法:

        // 语法1        没有查询参数
        //   axios.get('url地址').then(function(res){获取服务端响应结果});

        // 语法2        有查询参数
        //   axios.get('url地址', {params: {键: 值, 键: 值}}).then(function(res){获取服务端响应结果});

        let btn = document.querySelector('.get');
        btn.onclick = function() {

            // 别名写法没有查询参数
            axios.get('/api/get').then(function(res) {
                console.log(res);
            });

            // 别名写法带有查询参数
            axios.get('/api/get', {params: {aa: 1, bb: 2}}).then(function(res){
                console.log(res);
            });
        };





        // 1. axios   post 请求别名写法:

        // 语法
        //   axios.post('url地址', {键: 值, 键: 值}).then(function(res){获取服务端响应结果});

        let btn1 = document.querySelector('.post');

        btn1.onclick = function() {

            // post 别名写法
            axios.post('/api/post', {aa: 1, bb: 2}).then(function(res){
                console.log(res);
            });

            // post 别名其他写法
            axios.post('/api/post', 'aa=1&bb=2').then(function(res){
                console.log(res);
            });
        };

        // 问题:  post 请求的时候, 为什么后面写一个字符串也可以?
        // 因为利用了 enctype 属性设置数据格式特点




    </script>
</body>
</html>